<template>
	<view class="carouselManagementPage">


		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="carouselManagementList">
					<image class="carouselImg" :src="item.img" mode="img"></image>
					<view class="flex-start padding_26rpx">
						<view class="edit flex " @click="editCarousePage(item)">
							编辑
						</view>
						<view class="delete flex" @click="deleteCarouse(item)">
							删除
						</view>
					</view>
				</view>
			</block>

		</mescroll-body>

		<view class=" flex submitBtn" @click="addCarousel()">
			添加
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				carouselList: [{
						image: '../../static/会员卡管理端/矩形 1243.png'
					},
					{
						image: '../../static/会员卡管理端/矩形 1243.png'
					},
					{
						image: '../../static/会员卡管理端/矩形 1243.png'
					}
				],
				list: [],
				token: uni.getStorageSync('login').token,
			
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();
		},
		methods: {
			editCarousePage(item){
				this.$sun.navGo('/pages/carouselManagement/addCarouselManagement/addCarouselManagement',{...item})
			},
			addCarousel(){
				console.log('111')
				this.$sun.navGo('/pages/carouselManagement/addCarouselManagement/addCarouselManagement')
			},
			// 轮播图列表
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.posterList,
					data: {
						page: scroll.num,
						limit: 10,
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
								
				})
					
								
				if (result.code == 0) {
				
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
				// posterList
				// const result = {
				// 	"code": 200,
				// 	"message": "操作成功",
				// 	"data": {
				// 		"list": this.carouselList,
				// 		"count": 1
				// 	}
				// }
			
			},
			deleteCarouse(item){
				uni.showModal({
					title: '提示',
					content: '是否删除该条轮播图数据',
					success: async (res) => {
						if (res.confirm) {
				
							const result = await this.$http.post({
								url: this.$api.delPoster,
								data: {
									id: item.id,
									
				
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
				
							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast(result.msg, 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {
				
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.carouselManagementPage {
		padding: 30rpx;

		.submitBtn {
			width: 676rpx;
			height: 76rpx;
			border-radius: 200rpx;
			color: rgb(255, 255, 255);
			background: rgb(81, 142, 247);
			position: fixed;
			bottom: 40rpx;
			z-index: 99;
		}

		.carouselManagementList {
			border-radius: 0px 0px 10px 10px;
			margin-top: 20rpx;

			background: rgb(255, 255, 255);

			.carouselImg {

				height: 312rpx;
			}

			.delete {
				border-radius: 12rpx;
				width: 100rpx;
				height: 52rpx;
				background: rgb(255, 0, 0);
				color: rgb(255, 255, 255);
				border-radius: 12rpx;
			}

			.edit {
				margin-right: 20rpx;
				border-radius: 12rpx;
				width: 100rpx;
				height: 52rpx;


				color: rgb(1, 1, 1);
				box-sizing: border-box;
				border: 1px solid rgb(231, 231, 231);
				border-radius: 6px;

				background: rgb(255, 255, 255);
			}

		}
	}

	page {
		background: #f6f6f6;
	}
</style>